<!DOCTYPE html>
<html>
<head>
    <title>Mermaid Test</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
</head>
<body>
    <h1>Mermaid Test</h1>
    <div id="mermaid-container"></div>
    <div id="debug-info"></div>
    
    <script>
        mermaid.initialize({ startOnLoad: false });
        
        const testCode = 'graph TD; A[变量创建] --> B[所有权转移]; B --> C[旧变量失效]; B --> D[新变量有效];';
        
        console.log('Testing Mermaid...');
        
        mermaid.render('test-mermaid', testCode)
            .then(result => {
                console.log('Mermaid result:', result);
                console.log('Result type:', typeof result);
                console.log('Result is array:', Array.isArray(result));
                console.log('Result keys:', Object.keys(result));
                
                const debugInfo = document.getElementById('debug-info');
                debugInfo.innerHTML = `
                    <p>Result type: ${typeof result}</p>
                    <p>Is Array: ${Array.isArray(result)}</p>
                    <p>Keys: ${Object.keys(result).join(', ')}</p>
                    <p>Result: <pre>${JSON.stringify(result, null, 2)}</pre></p>
                `;
                
                let svgContent = '';
                if (typeof result === 'string') {
                    svgContent = result;
                } else if (result && typeof result === 'object') {
                    if (result.svg) {
                        svgContent = result.svg;
                    } else if (Array.isArray(result) && result.length > 0) {
                        svgContent = result[0];
                    }
                }
                
                console.log('Final SVG content:', svgContent);
                console.log('SVG content type:', typeof svgContent);
                console.log('SVG includes <svg>:', svgContent.includes ? svgContent.includes('<svg') : 'N/A');
                
                document.getElementById('mermaid-container').innerHTML = svgContent;
            })
            .catch(error => {
                console.error('Mermaid error:', error);
                document.getElementById('debug-info').innerHTML = `<p>Error: ${error.message}</p>`;
            });
    </script>
</body>
</html>